<template>
  <view class="course-info center column">
    <image v-for="(url, index) in imageList" :key="index" :src="url"  @load="load" lazy-load mode="widthFix"></image>
    <image v-if="loading" class="loading" src="/static/images/loading.gif" ></image>
  </view>
</template>

<script>
  export default {
    props: {
      imageList: {
        type: Array,
        default: () => [
          'https://img.alicdn.com/imgextra/i2/3603079088/O1CN01V8VO2y2H0M5Bx33L3_!!3603079088.jpg'
        ]
      }
    },
    data() {
      return {
        loading: true //图片是否加载中
      }
    },
    methods: {
      load() {
        this.loading = false
      }
    }
  }
</script>

<style lang="scss">
  .course-info {
    image {
      width: 100%;
    }
    .loading {
      height: 90rpx;
      width: 90rpx;
      margin-top: 50rpx;
    }
  }
</style>
